<template>
  <nav>
    <div v-if="!isShop">
      <van-tabbar v-model="active">
        <van-tabbar-item to="/" name="home" icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item to="/records" name="records" icon="records">点餐</van-tabbar-item>
        <van-tabbar-item to="/user" name="user" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <div v-else>
      <van-tabbar v-model="active">
        <van-tabbar-item to="/handleorders" name="handleOrders" icon="orders-o">订单处理</van-tabbar-item>
        <van-tabbar-item to="/handleshop" name="handleShop" icon="records">店铺操作</van-tabbar-item>
      </van-tabbar>
    </div>
  </nav>
  <router-view />
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import bus from 'vue3-eventbus'

export default {
  setup() {
    const router = useRouter()
    const isShop = ref(false)
    const active = ref('home');
    onMounted(() => {
      bus.on('routerInfo', e => {
        active.value = e.active
      })
      bus.on('isShop', e => {
        isShop.value = e.isShop
      })
      init()
    })
    function init() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (userInfo)
        isShop.value = userInfo.type == 1 ? false : true
    }
    return {
      active,
      isShop
    };
  },

};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}
</style>
